<template>
	<view>
		<view class="grid-box">
			<view class="u-flex">
				<view class="u-m-r-20"><u-icon name="clock" size="80" :color="$u.color.infoDark"></u-icon></view>
				<view class="u-flex-1">
					<view class="head-title u-m-b-10"><text>{{orderForm.state}}</text></view>
					<view class="tips-txt" v-if="orderForm.state == '已受理'">感谢您的订单，回收小哥稍后会与您约定上门时间。如需咨询，请点下方"在线咨询"功能！</view>
					<view class="tips-txt" v-if="orderForm.state == '待上门'">回收小哥会电话联系确认订单，请留意接听。</view>
					<view class="tips-txt" v-if="orderForm.state == '待收款'">等待小哥进行分拣核算，与小哥确认明细。</view>
					<view class="tips-txt" v-if="orderForm.state == '已完成'">订单已完成，感谢您的使用。</view>
					<view class="tips-txt" v-if="orderForm.state == '已点评'">感谢您的意见</view>
					<view class="tips-txt" v-if="orderForm.state == '已取消'">该订单已取消</view>
				</view>
			</view>
		</view>
		<view class="grid-box">
			<view class="head-title u-m-b-10"><text>订单信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">订单编号：</text>
					<view class="text">{{orderForm.number}}</view>
				</view>
				<view class="item">
					<text class="label">下单时间：</text>
					<view class="text">{{$u.timeFormat(orderForm.createddatetime.replaceAll('-','/'), 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="item">
					<text class="label">预计回收品：</text>
					<view class="text">
						<u-tag
							class="u-m-l-5"
							v-for="(item, index) in orderForm.estimated" 
							:key="index"
							:text="item.names" 
							type="info" 
							size="mini"
						/>
					</view>
				</view>
				<!-- <view class="item">
					<text class="label">预约上门时间：</text>
					<view class="text" v-if="orderForm.doortime">{{$u.timeFormat(orderForm.doortime.replaceAll('-','/'), 'yyyy-mm-dd hh:MM:ss')}}</view>
					<view class="text" v-else>尽快上门</view>
				</view> -->
				<view class="item" v-if="orderForm.brotherdoortime">
					<text class="label">实际上门时间：</text>
					<view class="text">{{$u.timeFormat(orderForm.brotherdoortime.replaceAll('-','/'), 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
			</view>
		</view>
		<view class="grid-box">
			<view class="head-title u-m-b-10"><text>联系人信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">联系人：</text>
					<view class="text">{{orderForm.address.name}}</view>
				</view>
				<view class="item">
					<text class="label">电话：</text>
					<view class="text">{{orderForm.address.mobile}}</view>
				</view>
				<view class="item">
					<text class="label">所属地区：</text>
					<!-- <view class="text">{{orderForm.address.citynames.split(',').join('')}}</view> -->
					<view class="text">{{orderForm.address.citynames}}</view>
				</view>
				<view class="item">
					<text class="label">详细地址：</text>
					<view class="text">{{orderForm.address.address}}</view>
				</view>
			</view>
		</view>
		<view class="grid-box" v-if="orderForm.pics.length > 0 ">
			<view class="head-title u-m-b-20"><text>拍照</text></view>
		
			<view class="upload-box u-m-b-10 u-m-t-10 u-flex" style="flex-wrap: wrap;" v-if="orderForm.pics.length > 0 ">
				<view class="item u-p-r-10" v-for="(item,index) in orderForm.pics" :key="index">
					<u-image width="200rpx" height="200rpx" :src="item" @click="seePhoto(item)"></u-image>
				</view>
			</view>
			<view class="total" v-if="orderForm.state == '已受理' || orderForm.state == '待上门' || orderForm.state == '待收款'">
				<text class="u-font-24">共{{orderForm.estimated.length}}种回收品</text>
			</view>
		</view>
		
		<view class="grid-box" v-if="orderForm.details.length > 0">
			<view class="u-table-box">
				<view class="head-title u-m-b-20"><text>分拣清算</text></view>
				<!-- <u-table>
					<u-tr>
						<u-th><view style="height: 40px;">类型</view></u-th>
						<u-th><view style="height: 40px;">重量</view></u-th>
						<u-th><view style="height: 40px;">单价(元/KG)</view></u-th>
						<u-th><view style="height: 40px;">合计(元)</view></u-th>
					</u-tr>
					<u-tr v-for="(item,index) in orderForm.details" :key="index">
						<u-td>{{item.typenames}}</u-td>
						<u-td>{{item.weight}}KG</u-td>
						<u-td>{{item.price}}</u-td>
						<u-td>{{(item.weight*item.price).toFixed(2)}}</u-td>
					</u-tr>
				</u-table> -->
				<goods-list :details="orderForm.details"></goods-list>
			</view>
			<view class="total">
				<text>实际总回收金额:</text>
				<text class="total-price">
					￥{{orderForm.amount==0?'--':orderForm.amount.toFixed(2)}}
					<!-- <text class="decimal">00</text> -->
				</text>
			</view>
		</view>
		<view class="grid-box" v-if="orderForm.signinpic">
			<view class="head-title u-m-b-20"><text>小哥上门拍照</text></view>
		
			<view class="upload-box u-m-b-10 u-m-t-10 u-flex">
				<view class="item u-p-r-10">
					<u-image width="200rpx" height="200rpx" :src="orderForm.signinpic" @click="seePhoto(orderForm.signinpic)"></u-image>
				</view>
			</view>
		</view>
		
		<view class="grid-box" v-if="orderForm.brother && orderForm.state != '已受理'">
			<view class="head-title u-m-b-10"><text>小哥信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">小哥姓名：</text>
					<view class="text">{{orderForm.brother.name}}</view>
				</view>
				<view class="item" @click="call(orderForm.brother.mobile)">
					<text class="label">电话：</text>
					<view class="text">
						<u-icon name="phone-fill" size="32"></u-icon>
						<text class="text">{{orderForm.brother.mobile}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view id="targetDiv" class="grid-box" v-if="orderForm.comment">
			<view class="head-title u-m-b-10"><text>我的点评</text></view>
			<view class="comment-box u-p-0">
				<view class="hd u-font-30">平台服务</view>
				<view class="u-flex">
					<text class="label">便捷性：</text>
					<u-rate v-model="orderForm.comment.convenience"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">操作性：</text>
					<u-rate v-model="orderForm.comment.operability"></u-rate>
				</view>
				<view class="hd">小哥服务</view>
				<view class="u-flex">
					<text class="label">穿着整齐：</text>
					<u-rate v-model="orderForm.comment.dresssharp"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">服务态度：</text>
					<u-rate v-model="orderForm.comment.serviceattitude"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">业务能力：</text>
					<u-rate v-model="orderForm.comment.businesscapability"></u-rate>
				</view>
				<view class="hd u-font-30">点评</view>
				<u-input type="textarea"  :border="true" :disabled="true" v-model="orderForm.comment.remarks" />
			</view>
		</view>
		
		<view class="grid-box" v-if="process.length > 0">
			<view class="head-title u-m-b-30"><text>订单进程</text></view>
			<u-time-line>
				<u-time-line-item v-for="(item,index) in process" :key="index">
					<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
					<template v-slot:content>
						<view>
							<view class="u-order-title u-m-b-20">{{item.state}}</view>
							<view class="u-order-desc" v-if="item.state == '已接单'">
								<text>{{item.createusername}}已接单</text>
							</view>
							<view class="u-order-desc" v-if="item.remarks">
								<text v-if="item.state == '已取消'">取消原因：</text>
								<text>{{item.remarks}}</text>
							</view>
							<view class="u-order-time"><u-icon name="clock"></u-icon>{{item.createddatetime}}</view>
							<!-- <view class="u-order-time"><u-icon name="clock"></u-icon>{{$u.timeFormat(item.createddatetime.replaceAll('-','/'), 'yyyy-mm-dd hh:MM:ss')}}</view> -->
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<view class="navigation-box">
			<view class="navigation">
				<view class="right">
					<button class="navbtn u-flex-1" style="color: #000;" @click="cancel" v-if="orderForm.state == '已受理'">取消订单</button>
					<button class="navbtn bg-gradual-blue u-flex-1" open-type="contact" plain>在线咨询</button>
					<button type="primary" class="navbtn bg-gradual-blue u-flex-1" @click="show = true" v-if="orderForm.state == '已完成'">订单点评</button>
					<button class="navbtn bg-gradual-blue u-flex-1" type="primary" @click="scrollToTarget" v-if="orderForm.state == '已点评'">查看点评</button>
					<button class="navbtn u-flex-1" @click="goHome" style="color: #000;">返回首页</button>
				</view>
			</view>
			<view class="sp"></view>
		</view>
		<!-- 评论 -->
		<u-popup v-model="show" mode="center" :closeable="true">
			<view class="comment-box">
				<view class="hd">平台服务</view>
				<view class="u-flex">
					<text class="label">便捷性：</text>
					<u-rate v-model="commentsForm.convenience"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">操作性：</text>
					<u-rate v-model="commentsForm.operability"></u-rate>
				</view>
				<view class="hd">小哥服务</view>
				<view class="u-flex">
					<text class="label">穿着整齐：</text>
					<u-rate v-model="commentsForm.dresssharp"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">服务态度：</text>
					<u-rate v-model="commentsForm.serviceattitude"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">业务能力：</text>
					<u-rate v-model="commentsForm.businesscapability"></u-rate>
				</view>
				<view class="hd">点评</view>
				<u-input type="textarea" :clearable='false' :border="true" v-model="commentsForm.remarks" />
				<view class="u-m-t-20"></view>
				<u-button type="primary" @click="comments">提交</u-button>
			</view>
		</u-popup>
		<!-- 取消订单 -->
		<u-popup v-model="showCancel" mode="center" border-radius="14" z-index="999" closeable>
			<view class="u-p-40" style="width: 600rpx;">
				<view class="u-p-t-30 u-p-b-15">请填写取消订单原因：</view>
				<view class="u-p-b-30">
					<u-input v-model="cancelForm.reason" type="textarea" :border="true" />
				</view>
				<u-button type="error" class="navbtn" @click="cancelOrder">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				orderForm: {
					address:{},
					estimated: [],
					brother: {},
					pics: [],
					details: [],
					createddatetime: '',
					brotherdoortime: '',
					comment:{}
				},
				showCancel: false,
				cancelForm: {
					id: 0,
					reason: ""
				},
				show: false,
				type: 0,
				process: [],
				commentsForm:{
					orderid: 0,
					convenience: 5,
					operability: 5,
					dresssharp: 5,
					serviceattitude: 5,
					businesscapability: 5,
					remarks: ""
				}
			}
		},
		onLoad(opt) {
			this.type = opt.t
			this.id = opt.id
			this.getProcess()
			this.orderView(this.id).then(()=>{
				// this.getGoodsType()
			})
		},
		onPullDownRefresh() {
			this.getProcess()
			this.orderView(this.id).then(()=>{
				// this.getGoodsType().then(()=>{
				// 	uni.stopPullDownRefresh(); //停止当前页面下拉刷新
				// })
			})
		},
		methods: {
			scrollToTarget() {
			    uni.pageScrollTo({
			        selector: '#targetDiv',
			        duration: 500
			    })
			},
			// 返回首页
			goHome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 提交评论
			comments(){
				this.commentsForm.orderid = this.id
				this.$u.post('/User/Order/Comments',this.commentsForm).then((res)=>{
					uni.showToast({
						title: res.msg
					})
					this.orderView(this.id)
					this.show = false
				})
			},
			// 打电话
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			// 获取订单流程
			getProcess(){
				this.$u.get('/User/Order/Process?id=' + this.id).then((res)=>{
					this.process = res
				})
			},
			cancel(){
				this.showCancel = true
			},
			// 取消订单
			cancelOrder(){
				this.cancelForm.id = this.id
				uni.showModal({
					title: '提示',
					content: '您确定要取消订单吗?',
					success: (res) => {
						if (res.confirm) {
							this.$u.post('/User/Order/Cancel',this.cancelForm).then((res)=>{
								uni.showToast({
									title: res.msg
								})
								setTimeout(()=>{
									uni.reLaunch({
										url: '/pages/my/order/order'
									})
								},1500)
							})
						}
					}
				})
			},
			// 订单详情
			orderView(id){
				return this.$u.get('/User/Order/Detail?id='+id).then((res)=>{
					let data = res
					
					data.estimated.forEach((cell,index)=>{
						data.estimated[index].icon = this.fileURL+cell.icon
					})
					data.pics.forEach((cell,index)=>{
						data.pics[index] = this.fileURL+cell
					})
					if(data.signinpic){
						data.signinpic = this.fileURL + data.signinpic
					}
					data.details.forEach((item)=>{
						item.icon = this.fileURL + item.icon
					})
					data.address.citynames = data.address.citynames.replaceAll(',','-')
					this.orderForm = data
				})
				
			},
			// 获取回收品类
			getGoodsType(){
				return this.$u.get('/Waste/Type/List').then((res)=>{
					let dataArr = res
					let min = 0 //最小重量
					let max = 0 //最大重量
					this.orderForm.minTotal = 0
					this.orderForm.maxTotal = 0
					this.orderForm.estimated.forEach((item)=>{
						min = item.min
						max = item.max
						
						dataArr.forEach((cell)=>{
							if(item.largetype.id == cell.id){
								item.minfitprice = cell.minfitprice
								item.highfitprice = cell.highfitprice
								this.orderForm.minTotal += cell.minfitprice*min
								this.orderForm.maxTotal += cell.highfitprice*max
							}
						})
					})

					this.orderForm.minTotal = this.orderForm.minTotal.toFixed(2)
					this.orderForm.maxTotal = this.orderForm.maxTotal.toFixed(2)
					this.$forceUpdate()
					console.log(this.orderForm)
				})
			},
			// getUserPrice(id){
			// 	this.$u.post('/Waste/Price/GetUserPrice',{
			// 		productId: id,
			// 		orderId: this.orderForm.id
			// 	}).then((res)=>{
			// 		console.log(res)
			// 	})
			// },
			seePhoto(url){
				let img = this.fileURL + url
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 点评
	.comment-box{
		padding: 60rpx;
		width: 600rpx;
		.hd{
			border-bottom: 1px solid $u-border-color;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}
		.u-flex{
			margin: 10rpx 0;
			.label{
				color: $u-content-color;
			}
		}
	}
	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 24rpx;
		margin-top: 30rpx;
		box-shadow: $u-color-border-shadow;
		.head-title{
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			.more{
				color: $u-tips-color;
			}
		}
		.tips-txt{
			color: $u-tips-color;
			font-size: 24rpx;
		}
		.content{
			display: flex;
			.title{
				font-weight: bold;
				font-size: 28rpx;
			}
		}
		.total{
			text-align: right;
			border-top: 1px solid #f2f2f2;
			padding: 20rpx 0 0;
		}
		.text-orange{
			color: $u-color-orange
		}
	}
	// 订单
	.order {
		// width: 690rpx;
		// background-color: #ffffff;
		// margin: 30rpx auto;
		// border-radius: 30rpx;
		// box-sizing: border-box;
		// padding: 30rpx;
		// font-size: 28rpx;
		// box-shadow: $u-color-border-shadow;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;
			.left {
				margin-right: 20rpx;
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
			.total-price {
				font-size: 32rpx;
				color: $u-color-orange;
			}
		}
		.time{
			font-size: 24rpx;
			margin: 20rpx 0;
			line-height: 40rpx;
		}
		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
				padding: 0 10rpx;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}
	// 按钮栏
	.navigation {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 99999;
		// background-color: white;
		display: flex;
		margin-top: 20rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		
		// padding: 16rpx 0;
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			flex: 1;
			justify-content: space-around;
			padding-left: 10rpx;
			padding-right: 10rpx;
			padding-top: 20rpx;
			padding-bottom: env(safe-area-inset-bottom);
			.navbtn{
				margin: 0 10rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				border: 0;
				color: #fff;
				// &.primary{
				// 	color: #fff;
				// }
			}
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
				margin: 16rpx 0;
			}
			.cancel {
				margin-right: 30rpx;
				color: $u-tips-color;
			}
			.buy {
				background-color: #ff7900;
			}
		}
	}
	
	.sp{
		// height: calc(185rpx + env(safe-area-inset-bottom));
		height: 205rpx;
		width: 750rpx;
	}
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	
	//
	.u-table-box{
		margin: 20rpx 0;
		.green{
			background-color: $u-color-green;
			color: #fff!important;
		}
		.red{
			background-color: $u-color-red;
			color: #fff!important;
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
			color: $u-color-orange;
		}
	}
</style>
